<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- 
    JS的引入方式：
       1.内部引入：
           在页面用，一对script标签引入JS代码
           script代码建议放在head标签中

       2.外部引入：
         注意：
         1.一个html中可以有多个script标签
         2.一对script标签不能在引入外部js文件的同时定义内部脚本
         3.script标签如果用于引入外部js文件，中间最好不要有任何符号包括空格和换行
  -->

 <!-- <script>
     /*
     1 JS 如何声明函数？ ==> function 函数名(){}
     2 函数如何和单击按钮的行为绑定到一起？
     3 如何弹窗提示？
     */
     function suprise(){
      //弹窗提示
      alert("hello 我是惊喜")
     }
      </script> 
  -->    
      
    <meta charset="UTF-8">
    <title>小标题</title>
    <style>
        .btn1{
            display: block;
                width: 150px; 
                height: 40px; 
                background-color: rgb(245, 241, 129); 
                color: rgb(238, 31, 31);
                border: 3px solid rgb(238, 23, 66);
                font-size: 22px;
                font-family: '隶书';
                line-height: 30px;
                border-radius: 5px; 
        }
    </style>
   <!--<script>
      内部引入
    function suprise(){
        alert("hello,我是惊喜")
    }
    </script>--> 
    <script src="js/button.js" type="text/javascript"></script>
</head>
    <body>
    <button class="btn1" onclick="suprise()">点击有惊喜</button>
</body>
</html>